<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*凹槽宽度*/
        #mainpage::-webkit-scrollbar{
            width:8px;
            height:8px;
        }
        /*拖动条*/
        #mainpage::-webkit-scrollbar-thumb{
            background-color:#ccc;
            border-radius:6px;
        }
        /*背景槽*/
        #mainpage::-webkit-scrollbar-track{
            background-color:#ddd;
            border-radius:6px;
        }
        * {
            margin: 0;
            padding: 0;
        }

        .top {
            height: 40px;
            width: 100%;
            background-color: #71E6C2;
            position: fixed;
            left: 0;
            top: 0;
            margin-bottom: 40px;
        }

        .nav {
            height: 40px;
            width: 100%;
            background-color: #ECCF4E;
            position: fixed;
            left: 0;
            top: 40px;
            margin-bottom: 40px;
        }

        table {
            border: 1px solid #B8B1B1;
            width: 100%;
            padding-top: 40px;
        }

        .one {
            background-color: #B7E9AD;
            height: 400px;
        }

        .two {
            background-color: #8FB3E9;
            height: 300px;
        }

        .tdone {
            background-color: #F39191;
        }

        .tdtwo {
            background-color: #71E6C2;
        }

        #hoverspan {
            width: 200px;
            border: 1px solid salmon;
            position: relative;
        }

        #hoverspan:hover::after {
            content: attr(data-msg);
            position: absolute;
            font-size: 12px;
            display: block;
            text-align: center;
            left: 0;
            top: 25px;
            border: 1px solid #71E6C2;
        }
    </style>
</head>

<body>
    <div class="top"></div>
    <div class="nav"></div>
    <table>
        <tr>
            <td class="tdone">
                <div class="one"></div>
            </td>
            <td class="tdtwo">
                <div class="two"></div>
            </td>
        </tr>
    </table>
    <div class="print_div"> <label for="form-control" class="control-label">姓名:</label> <input type="text" class="form-control input_sm  print_input_sm"
            name="tx_hz_name" id="tx_hz_name" value="Huanzhe xingming "></div>
    <img src=""
        alt="">
    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <rect x="20" y="20" rx="10" ry="10" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;stroke-opacity:0.9;opacity:0.9"
        />
    </svg>
    <span id="hoverspan" data-msg="提示的文字">悬停提示文字</span>
    <style>
        .bd {
            max-height: 0;
            overflow: hidden;
            transition: all .5s ease-out;
        }
        li:nth-child(odd){
            background-color: #ccc;
            min-height: 40px;
            height:30px;
        }
        li:hover .bd {
            max-height: 600px;
            transition-timing-function: ease-in;
        }
    </style>
    <ul>
        <li>
            <div class="hd"> 列表1 </div>
            <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
        </li>
        <li>
            <div class="hd"> 列表2 </div>
            <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
        </li>
        <li>
            <div class="hd"> 列表3 </div>
            <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
        </li>
    </ul>
    
</body>

</html>